<!--
/**
 * Copyright © 2013-2017 Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->

<div class="admin__field" visible="visible" css="$data.additionalClasses">
    <label class="admin__field-label" if="$data.label" attr="for: uid">
        <span translate="label" attr="'data-config-scope': $data.scopeLabel"/>
    </label>

    <div class="admin__field-control" css="'_with-tooltip': $data.tooltip">
        <div class="file-uploader" data-role="drop-zone" css="_loading: isLoading">
            <div class="file-uploader-area">
                <input type="file" afterRender="onElementRender" attr="id: uid, name: inputName, multiple: isMultipleFiles" disable="disabled" />
                <label class="file-uploader-button action-default" attr="for: uid" translate="'Upload'"/>

                <span class="file-uploader-spinner"/>
                <render args="fallbackResetTpl" if="$data.showFallbackReset && $data.isDifferedFromDefault"/>
            </div>

            <render args="tooltipTpl" if="$data.tooltip"/>

            <div class="admin__field-note" if="$data.notice" attr="id: noticeId">
                <span html="notice"/>
            </div>

            <label class="admin__field-error" if="error" attr="for: uid" text="error"/>

            <each args="data: value, as: '$file'" render="$parent.getPreviewTmpl($file)"/>

            <div if="isMultipleFiles" class="file-uploader-summary">
                <label attr="for: uid"
                       class="file-uploader-placeholder"
                       css="'placeholder-' + placeholderType">
                    <span class="file-uploader-placeholder-text"
                          translate="'Click here or drag and drop to add files.'"/>
                </label>
            </div>
        </div>
        <render args="$data.service.template" if="$data.hasService()"/>
    </div>
</div>
